import React, { useContext, useState } from 'react'
import { Tooltip, Popconfirm, Table, Button, Modal, Form, Input } from 'antd'
import IconSvg from '@/components/IconSvg'
import { messageSettingsContext } from '../../context'
import CKEditor from '@/components/CKEditor'
import style from './style.module.less'

export default () => {
  const a = 1
  const { tempalateConfig } = useContext(messageSettingsContext)

  const columns: any = [
    {
      title: '创建时间',
      dataIndex: 'createDate',
      key: 'createDate',
      width: 320,
      align: 'center',
    },
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
      width: 320,
      align: 'center',
    },
    {
      title: '内容',
      dataIndex: 'content',
      key: 'content',
      width: 628,
      ellipsis: true,
      align: 'center',
      render: (value: string) => (
        <div className={style.hiddenWrappr}>
          <Tooltip
            overlayStyle={{ maxWidth: 'none', maxHeight: 'none', width: 628 }}
            title={<span dangerouslySetInnerHTML={{ __html: value }} />}
            mouseEnterDelay={0.5}
          >
            {/* {value} */}
            <span dangerouslySetInnerHTML={{ __html: value }} />
          </Tooltip>
        </div>
      ),
      // render: (value: string) => <div dangerouslySetInnerHTML={{ __html: value }} />,
    },
    {
      title: '操作',
      key: 'action',
      fixed: 'right',
      width: 220,
      align: 'center',
      render: (text: any, record: any) => (
        <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center' }}>
          <Button type='link' onClick={() => tempalateConfig.templateEdit(record)}>
            <IconSvg name='cityExamine' style={{ marginRight: 5 }} />
            编辑
          </Button>
          {/* <Divider type='vertical' /> */}
          <Button type='link' style={{ color: 'red' }}>
            <Popconfirm
              onConfirm={() => {
                tempalateConfig.templateDelete(record)
              }}
              title='确定删除吗？'
              okText='确定'
              cancelText='取消'
            >
              <IconSvg name='cityDelete' style={{ marginRight: 5 }} />
              删除
            </Popconfirm>
          </Button>
        </div>
      ),
    },
  ]

  return (
    <div className={style.messagePush}>
      <div style={{ width: '100%', height: 40, display: 'flex', justifyContent: 'flex-end', marginBottom: 10 }}>
        <Button
          onClick={tempalateConfig.templateOpenModalClick}
          style={{ border: '1px solid #618dff', color: '#618dff' }}
        >
          <IconSvg name='templateAdminx' style={{ marginRight: 5 }} />
          新增模板
        </Button>
      </div>
      <div>
        {/*  */}
        <Table
          rowKey='id'
          scroll={{ x: 'max-content', y: 'calc(100vh - 356px)' }}
          pagination={{
            position: ['bottomRight'],
            total: tempalateConfig.templatePaging.totalCount,
            onChange: (page: number, pageSize: number) => {
              console.log('💩💩💩', page)
              tempalateConfig.templateChangePagingUploadTable(page, pageSize)
            },
            showTotal: (total: number) =>
              `共 ${total} 条记录  第 ${tempalateConfig.templatePaging.pageIndex} / ${Math.ceil(
                total / tempalateConfig.templatePaging.pageSize,
              )}页`,
            current: tempalateConfig.templatePaging.pageIndex,
            pageSize: tempalateConfig.templatePaging.pageSize,
            showSizeChanger: true,
          }}
          dataSource={tempalateConfig.templateTableListData}
          columns={columns}
        />
      </div>
      {/* 查看弹框 */}
      <Modal
        width={1000}
        open={tempalateConfig.templateOpenModal}
        footer={null}
        onCancel={tempalateConfig.templateClearModal}
        title={tempalateConfig.templateAddAndEdit ? '编辑模板' : '新增模板'}
      >
        <Form form={tempalateConfig.templateForm}>
          <Form.Item label='推送标题' name='title' labelAlign='left'>
            <Input onChange={tempalateConfig.templateInputValue} style={{ width: 320 }} />
          </Form.Item>

          <Form.Item label='推送内容' labelAlign='left'></Form.Item>
          <div className={style.eduit}>
            <div className={style.center}>
              <div className={style.centerEditor}>
                <CKEditor onChange={tempalateConfig.auditValue} value={tempalateConfig.templateContent.content} />
              </div>
              <div className={style.buttonBoxDiv}>
                <Button onClick={tempalateConfig.templateClearModal}>取消</Button>
                <Button onClick={tempalateConfig.templateSave} type='primary'>
                  保存
                </Button>
              </div>
            </div>
          </div>
        </Form>
      </Modal>
    </div>
  )
}
